<!--
<template>
<mu-paper class="bottom-tab">
  <!- <mu-bottom-nav :value="curNav" @change="handleChange"> ->
  <mu-bottom-nav :value="curNav">
    <mu-bottom-nav-item class="tab-item" value="index" icon=" " iconClass="tab-icon iconfont icon-shouye1" title="首页" to="/" />
    <mu-bottom-nav-item value="family" icon=" " iconClass="tab-icon iconfont icon-shouye2" title="家人" to="/family" />
    <mu-bottom-nav-item value="shop" icon=" " iconClass="tab-icon iconfont icon-shouye7" title="商城" to="shop" />
    <mu-bottom-nav-item value="mine" icon=" " iconClass="tab-icon iconfont icon-shouye4" title="我的"/>
  </mu-bottom-nav>
</mu-paper>
</template>

<script>
export default {
  props: {
    curNav: {
      type: String,
      default: ""
    }
  },
  methods: {
    handleChange (val) {
      this.bottomNav = val
    }
  }
}
</script>
<style lang="scss" scoped>
.bottom-tab {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.tab-item {
  .iconfont {
    font-size: px2rem(42);
  }
}
.tab-icon {
  font-size: px2rem(42) !important;
}
</style>
-->
<template lang="html">
  <div class="bottom-tab">
    <ul class="tab-list">
      <li class="tab" :class="{'active': curNav === 'index'}">
        <router-link class="link" to="/">
          <i class="iconfont icon-shouye1"></i>
          <span>首页</span>
        </router-link>
      </li>
      <li class="tab" :class="{'active': curNav === 'family'}">
        <router-link class="link" to="/family">
          <i class="iconfont icon-shouye2"></i>
          <span>家人</span>
        </router-link>
      </li>
      <li class="tab" :class="{'active': curNav === 'shop'}">
        <router-link class="link" to="/shop">
          <i class="iconfont icon-shouye7"></i>
          <span>商城</span>
        </router-link>
      </li>
      <li class="tab" :class="{'active': curNav === 'mine'}">
        <router-link class="link" to="/mine">
          <i class="iconfont icon-shouye4"></i>
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    curNav: {
      type: String,
      default: ""
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.bottom-tab {
  width: 100%;
  height: 56px;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid $grey;
  box-sizing: border-box;
  background-color: $white;
}
.tab-list {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .tab {
    flex-grow: 1;
    text-align: center;
    .link {
      color: #959595;
    }
    .iconfont {
      font-size: px2rem(42);
      margin: px2rem(10) auto;
      line-height: 1;
      padding: 0;
      display: block;
    }
    span {
      font-size: px2rem(18);
    }
    &.active {
      .link {
        color: $green;
      }
    }
  }
}
</style>
